<template>
  <div id="container">
    <p id="nav">
      <router-link class="route-item" to="/">Demo</router-link>
      <router-link class="route-item" to="/sortable">sortable</router-link>
      <router-link class="route-item" to="/masonry-css">vue masonry css</router-link>
      <router-link class="route-item" to="/masonry-wall">vue2 masonry wall</router-link>
      <router-link class="route-item" to="/dragable-waterfall">dragable waterfall</router-link>
      <router-link class="route-item" to="/drag-and-drop">原生拖拽</router-link>
      <router-link class="route-item" to="/vuedragable">vuedragable</router-link>
    </p>
    <div id="view">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
    name: 'home'
}
</script>

<style scoped>
#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
}

#nav {
  line-height: 24px;
}

.route-item {
  margin: 12px;
}

#view {
  position: relative;
  height: calc(100% - 24px);
  width: 100%;
  overflow: auto;
}
</style>
